<template>
  <div>
    <h4>商品排名</h4>
    <button @click="toLike">跳转到用户喜欢(不带参数)</button>
    <button @click="toLikeWithParam">跳转到购物车(带?name=lzm&age=98类型的参数)</button>
  </div>
</template>
<script>
export default {
  methods: {
    toLike() {
      this.$router.push({name: "Like"});
    },
    toLikeWithParam() {
      let name = 'lzm';
      let age = 98;
      // 第一种传参方式：使用字符串
      // 这里同时采用了restful和？两种传参方式，也是可以的
      // this.$router.push({path:'/shopCart/' + name + "/" + age + "?name=李鸿章&age=68"});

      //   第二种方式：使用模板字符串
      // this.$router.push({path:`/shopCart/${name}/${age}?name=李鸿章&age=68`});

      //   第三种方式：对象形式，最常用，也是最推荐的写法
      //   this.$router.push({name: "ShopCart", params: {name: name, age: age}, query: {name: "曾国藩", age: 89}});

      //   面试题： 路由跳转时path和params式的对象写法是否可以一起使用？ 不可以，会导致无法跳转的问题，对象写法只能使用组件的name进行跳转
      //   this.$router.push({path:'/shopCart', query: {name: "曾国藩", age: 89}});

      //   面试题二： 如何制定params参数可传可不传？ 答案是：在配置路由的时候，在占位的后面加一个？表示这个参数为可选参数
      //   this.$router.push({name: "ShopCart", query: {name: "曾国藩", age: 89}});

      //   面试题三： params参数可以传递也可以不传递，但是如果传递的是空串，如何解决？
      //   如果传的是空串，会导致最终跳转的路径出现问题，可以通过设置params的值为undefined来解决
      // this.$router.push({
      //   name: "ShopCart",
      //   params: {name: '' || undefined, age: '' || undefined},
      //   query: {name: "曾国藩", age: 89}
      // });

      //   面试题四： 路由组件能不能传递props数据？ 可以
      //   方式一
      //   this.$router.push({
      //     name: "Trade",
      //     params: {name: '李鸿章'},
      //   });

      // 方式三
      this.$router.push({
        name: "Trade",
        params: {name: '文祥'},
        query: {age: 39}
      });
    },
  }
}
</script>
<style scoped>

</style>
